<!--
    group: 企业管理
    name: 企业入驻----上传认证截图
    url: /enterprise/modules/attestationSettled
-->
<template>
  <div>
    <h3>上传认证截图</h3>

    <div class="bottom_content">
      <div class="item">
        <h4>第1步：下载“登记注册身份”app</h4>
        <div class="color">
          <img src="../../../assets/screenshot/manual01.png" alt="" :preview="0">
        </div>
      </div>
      <div class="item">
        <h4>第2步：按要求完成身份验证</h4>
        <div class="color">
          <img src="../../../assets/screenshot/manual02.png" alt="" :preview="0">
        </div>
      </div>
      <div class="item">
        <h4>第3步：确认打开企业登记注册，并截图</h4>
        <div class="color">
          <img src="../../../assets/screenshot/manual03.png" alt="" :preview="0">
        </div>
      </div>
    </div>

    <div class="main_footer">
      <a-button type="primary" class="btnsLarge" @click="uploadPicture">下一步</a-button>
<!--      <a class="mLeft" @click="prevStep">返回上一步</a>-->
    </div>


    <!--上传截图-->
    <a-modal
      title="上传截图"
      :visible="visible"
      :footer="false"
      @cancel="handleCancel"
    >
      <!-- <UpLoadFile ref="qyfzrxx_sfrz" :config="sfrzConfig" :fileChangeEvent="(type,fileData)=>{retrievalData(type,fileData)}"></UpLoadFile> -->
      <p-UpLoadFile ref="qyfzrxx_sfrz" :showHelp="true" :config="sfrzConfig" v-model="qyfzrxx_sfrz_model" :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>

      <div class="main_footer">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </div>
    </a-modal>


  </div>
</template>

<script>
import '@/utils/rem'  //rem
import '@/assets/css/enterprise.less'  //css
import { queryEntInfo,inviteEntSgin } from '@/api/enterprise'
import PicturePreview from '@/views/common/picturePreview'
import uploadFiles from "@/views/common/uploadFiles";
const getConfig = ()=>{
  return {
    // 此参数必填  上传路径
    dir: "/qsb/contract/",
    // 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
    model: "单文件",
    // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
    showBG: false,
    // 此参数选填  表示是否可编辑
    readonly: false,
    // 提示信息
    tips:{
      card1: '请上传上传截图',
    },
    // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
    // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
    // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
    required: false,
    // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
    defaultFileList: {
      card1: {},
    },
    // 此参数集必填
    fielConfig: {
      // 允许上传的文件类型 当为空时表示不限制  默认为空
      //    可供选择类型：
      //          图片('jpg', 'png', 'jpeg')
      //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
      //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
      //          PDF(pdf)
      //          委托代征协议('pdf','jpg', 'png', 'jpeg')
      //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
      // eg:
      //    当值为string类型时，对所有（card1,card2,card3）的有效；
      //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
      type: "图片",
      // 允许上传的文件个数  默认值为1
      // eg: 1 表示只允许上传1个文件；
      //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
      size: 1,
      // 上传的单个文件大小 单位为 MB  默认值为1
      //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
      //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
      singleFileSize: 5,
    },
  }
}
export default {
  name: 'attestationSettled',
  data(){
    return{
      visible: false,
      appPicList: [],
      qyfzrxx_sfrz_model:{},
      sfrzConfig:getConfig(),
      sfrzConfig1: {
        dir:'/qsb/contract/', // 上传文件的地址
        required:false, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        multiple:false, // 优先级高于isTwo  开启多文件上传  默认值为false   当值为true时表示开启对文件上传，同时 isTwo 和 upLoadCardListConfig 失效
        isTwo:false, // 是否开启两个卡片上传 默认为false  表示只启用单个卡片单文件上传   true 表示开启两个卡片的单文件上传
        upLoadCardListConfig:[
          {type:'1',tips:'  ',fileInfo:{name:'',url:''}},
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig:{
          type:'图片', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 1, // 允许上传的文件个数  默认值为1
          singleFileSize: 5, //上传的单个文件大小 单位为 MB  默认值为1
        }
      },

    }
  },
  components:{
    PicturePreview,
    uploadFiles
  },
  props: ['channelId','undertakeData'],
  methods:{
    //上传截图
    uploadPicture(){
      this.visible = true
    },
    //上传截图
    retrievalData(type,files){
      if(type == 'card1'){
        this.appPicList = [
          {
            fileName: files.name,
            fileUrl: files.url
          }
        ];
      }
    },
    handleCancel(){
      this.visible = false;
    },
    //下一步
    nextStep(){
      let params = {};
      params.channelIdEncrept = this.channelId;
      params.entId = this.undertakeData.entId;

      // const res = this.$refs['qyfzrxx_sfrz'].getDataCheckRes( {card1:'请上传上传截图'})
      // if (res.card1===true){
        const {name,url} = this.qyfzrxx_sfrz_model.card1
      if(!this.isType.isNullOrUnDef(url) && !this.isType.isEmpty(url)){
        params.appInfo = {};
        params.appInfo.appPicList = [{fileName:name,fileUrl:url}];  //APP验证成功截图
      }
      queryEntInfo(params).then(res => {
        if (res.success){
          if (res.result){
            let data = res.result;
            // 邀请负责人线上签署
            inviteEntSgin({entId:this.undertakeData.entId}).then(res=>{
              if(res.code == 200){
                // 您选择了电子签，请先完成渠道法人实名认证！
                if(res.result.status == 1){
                  this.$emit('nextStep',{...data,agreeId:res.result.agreeId});
                }else{
                  this.$message.warning('您选择了电子签，请先完成渠道法人实名认证！');
                }
              }else{
                this.$message.warning(res.message);
              }
            })


          }
        }else{
          this.$message.warning(res.message);
        }
      })

    },
    //上一步
    prevStep(){
      this.$emit('prevStep');
    }
  }
}
</script>

<style scoped lang="less">
h3{
  color: @color-smudge;
}
.color{
  //width: 50%;
  //height: 2rem;
  border-radius: .1rem;
  cursor: pointer;
  margin-bottom: 20px;

  img{
    width: 100%;
    height: 100%;
    border-radius: .1rem;
    vertical-align: middle;
  }
}

</style>
